<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title>供应商系统</title>
		<link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.css"/>
		<link rel="stylesheet" href="/Public/css/style.css" />
		<link rel="stylesheet" type="text/css" href="/Public/css/font-awesome.min.css"/>
		<style>
			.ul-list li.libox{
				border-bottom: 10px solid #F2F2F2;
			} 
			.group{
				font-size: 14px;
				height: 28px;
				line-height: 28px;
			}
			.info-li{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				border-bottom: 1px solid #DDD;
			}
			.btns{
				text-align: center;
				padding: 15px;
			}
			.btns button:first-child{
				margin-right: 15px;
			}
			.btns button:last-child{
				margin-left: 15px;
			}
			.info{
				background-color: #FFF;
				display: none;
			}
			.left{
				flex:  0 0 70%;
			}
			.right{
				flex:  0 0 30%;
			}
			.left p{
				line-height: 26px;
				text-indent: 10px;
			}
		</style>
	</head>
	<body>
		<header class="header">
				<a href="javascript:;" onclick="history.go(-1)" class="back"><i class="fa fa-angle-left"></i></a>
				<h1>采购对账单</h1>
		</header>
		<div id="app">
			<ul class="ul-list">
                <li v-for="(list,index) in lists" class="libox" :class="list.state==1?'bg-danger':list.state==2?'bg-warning':'bg-success'" @click="liclick($event)">
                    <div class="group">
                        <div class="col-xs-6" style="font-weight: bold;">{{list.time}}</div>
                        <div class="col-xs-6" style="font-weight: bold;">总金额:{{allmoney(index)}}</div>
                    </div>
                    <div class="group">
                        <div class="col-xs-4">{{statetext(list.state)}}</div>
                        <div class="col-xs-8">结算方式：{{list.payment_way}}</div>
                    </div>
                    <div class="info">
                        <ul>
                            <li v-for="item in list.items" class="info-li">
                                <div class="left">
                                    <p>批次ID：{{item.id}}</p>
                                    <p>下单时间：{{item.time}}</p>
                                </div>
                                <div class="right">
                                    {{item.money}}
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
			</ul>
			<div role="dialog" class="modal fade" id="layer">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span>&times;</span>
							</button>
							<p class="modal-title">{{alert.title}}</p>
						</div>
						<div class="modal-body ">
							<textarea class="form-control" rows="5" placeholder="请填写问题" v-show="alert.textshow" v-model="alert.text"></textarea>							
						</div>
						<div class="modal-footer text-right">
							<button data-dismiss="modal" class="btn btn-primary">取消</button>
							<button data-dismiss="modal" class="btn btn-danger" @click="sub">提交</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="/Public/js/jquery-2.1.0.js"></script>
		<script src="/Public/js/bootstrap.js"></script>
		<script src="/Public/js/vue.js"></script>
		<script src="/Public/js/vue-resource.js"></script>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
                    lists:[],
					state:"",
					alert:{title:"",textshow:false,text:""},
					id:""
				},
				methods:{
					liclick:function(event){
						if($(event.currentTarget).find('.info').is(":hidden")){
							$(event.currentTarget).find('.info').slideDown(200);
						}else{
							$(event.currentTarget).find('.info').slideUp(200);
						};		
					},
                    statetext:function (n) {
                         switch (n){
                            case 1: return "待对账";break;
                            case 2: return "待付款";break;
                            case 3: return "已付款";break;
                        };
                    },
                    allmoney:function(index){
                        var all = 0;
                        for(var i in this.lists[index].items){
                            all += Number(this.lists[index].items[i].money);
                        }
                        return all.toFixed(1);
                    },
					doubt:function(id){					//疑问点击
						this.alert.title = "有何疑问？";
						this.alert.textshow = true;
						this.state = "doubt";
						this.id = id;
						$("#layer").modal();		
					},
					confirm:function(id){					//对账点击
						this.alert.title = "确认对账？";
						this.alert.textshow = false;
						this.state = "confirm";
						this.id = id;
						$("#layer").modal();
					},
					sub:function(){					
						if(this.state == "doubt"){		//疑问确认提交
                            if(!this.alert.text){
                                alert('请填写疑问');
                                return false;
                            };
							var data = {
								text:this.alert.text,
								id:this.id
							};
						 this.$http.post('1.php',data,{emulateJSON: true}).then(function (res) {		//初始化数据	            
			              		
			              },function (res) {
								this.error(res);
			              });
						};
						if(this.state == "confirm"){		//对账确认提交
							var data = {
								confirm:true,
								id:this.id
							};
							 this.$http.post('1.php',data,{emulateJSON: true}).then(function (res) {		//初始化数据	            
				              
				              },function (res) {
								this.error(res);
				              });
						};
						this.alert.text = "";
					},
					error:function(res){
						console.error("错误类型:"+res.status,"错误描述:"+res.statusText);
					}
				},
				created:function(){
                    this.$http.post('/order/accounts',{emulateJSON: true}).then(function (res) {		//初始化数据
                            this.lists = res.data.data;
                    },function (res) {

                    });
				}
			});
		</script>
	</body>
</html>
